
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { ChartDataPoint } from '../types';

interface ChartComponentProps {
  data: ChartDataPoint[];
  title: string;
  lineColor: string;
  dataKey: keyof ChartDataPoint;
}

const ChartComponent = ({ data, title, lineColor, dataKey }: ChartComponentProps) => {
  return (
    <div className="h-64 bg-black/60 border border-green-900/80 p-2 relative">
      <h4 className="text-center text-green-400 glow-cyan text-sm absolute top-2 left-1/2 -translate-x-1/2 z-10">{title}</h4>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={data}
          margin={{
            top: 25, right: 20, left: -10, bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="#00ff4133" />
          <XAxis dataKey="step" stroke="#00ff41" tick={{ fill: '#9ca3af' }} />
          <YAxis stroke="#00ff41" tick={{ fill: '#9ca3af' }} domain={[0, dataKey === 'value' && title.includes('准确率') ? 1 : 'auto']} />
          <Tooltip
            contentStyle={{
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              borderColor: '#00ff41',
              color: '#00ff41'
            }}
            labelStyle={{ color: '#ffffff' }}
          />
          <Legend wrapperStyle={{color: '#00ff41'}}/>
          <Line type="monotone" dataKey={dataKey} stroke={lineColor} strokeWidth={2} dot={false} name={title} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default ChartComponent;
